<template>
  <div class="box">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

<style lang="scss" scoped>
.box {
  margin-top: 10px;
  width: 120px;
  height: 36px;
  display: flex;
}

.box span {
  width: 6px;
  border-radius: 18px;
  margin-right: 3px;
}

.box span:nth-child(1) {
  animation: bar1 2s 0.2s infinite linear;
}

.box span:nth-child(2) {
  animation: bar2 2s 0.4s infinite linear;
}

.box span:nth-child(3) {
  animation: bar3 2s 0.6s infinite linear;
}

.box span:nth-child(4) {
  animation: bar4 2s 0.8s infinite linear;
}

.box span:nth-child(5) {
  animation: bar5 2s 1s infinite linear;
}

.box span:nth-child(6) {
  animation: bar6 2s 1.2s infinite linear;
}

.box span:nth-child(7) {
  animation: bar7 2s 1.4s infinite linear;
}

.box span:nth-child(8) {
  animation: bar8 2s 1.6s infinite linear;
}

.box span:nth-child(9) {
  animation: bar9 2s 1.8s infinite linear;
}

@keyframes bar1 {
  0% {
    background: #bd34fe;
    margin-top: 25%;
    height: 10%;
  }

  50% {
    background: #bd34fe;
    height: 100%;
    margin-top: 0%;
  }

  100% {
    background: #bd34fe;
    height: 10%;
    margin-top: 25%;
  }
}

@keyframes bar2 {
  0% {
    background: #a144f3;
    margin-top: 25%;
    height: 10%;
  }

  50% {
    background: #a144f3;
    height: 100%;
    margin-top: 0%;
  }

  100% {
    background: #a144f3;
    height: 10%;
    margin-top: 25%;
  }
}

@keyframes bar3 {
  0% {
    background: #6e61dd;
    margin-top: 25%;
    height: 10%;
  }

  50% {
    background: #6e61dd;
    height: 100%;
    margin-top: 0%;
  }

  100% {
    background: #6e61dd;
    height: 10%;
    margin-top: 25%;
  }
}

@keyframes bar4 {
  0% {
    background: #507ed8;
    margin-top: 25%;
    height: 10%;
  }

  50% {
    background: #507ed8;
    height: 100%;
    margin-top: 0%;
  }

  100% {
    background: #507ed8;
    height: 10%;
    margin-top: 25%;
  }
}

@keyframes bar5 {
  0% {
    background: #4aa1e8;
    margin-top: 25%;
    height: 10%;
  }

  50% {
    background: #4aa1e8;
    height: 100%;
    margin-top: 0%;
  }

  100% {
    background: #4aa1e8;
    height: 10%;
    margin-top: 25%;
  }
}
</style>
